<template>
  <div class="table-body">
    <div class="table-body-box">
      <el-table
          ref="multipleTable"
          :data="arryList"
          :stripe="tableoption.tableStripe"
          :border="tableoption.tableBorder"
          tooltip-effect="dark"
          style="width: 100%"
          header-cell-class-name="table-text-c"
          cell-class-name="table-text-c">
        <el-table-column
            label="学生头像"
            width="100"
            :key="1">
          <template slot-scope="scope">
            <ImagePreview :src="scope.row.student_pic" width="40px" height="40px"></ImagePreview>
          </template>
        </el-table-column>
        <el-table-column
            label="学生姓名"
            :key="2">
          <template slot-scope="scope">
            {{ scope.row.student_name }}
          </template>
        </el-table-column>
        <el-table-column
            label="班级"
            :key="3">
          <template slot-scope="scope">
            {{ scope.row.class_name }}
          </template>
        </el-table-column>
        <el-table-column
            label="意向次数"
            :key="6">
          <template slot-scope="scope">
            <el-button type="text" @click="showMaterials(scope.row.intent.material)">{{ scope.row.intent.count }}</el-button>
          </template>
        </el-table-column>
        <el-table-column
            label="认知材料"
            :key="7">
          <template slot-scope="scope">
            <el-button type="text" @click="showMaterials(scope.row.cognitive.material)">{{ scope.row.cognitive.count }}</el-button>
          </template>
        </el-table-column>
        <el-table-column
            label="使用材料"
            :key="8">
          <template slot-scope="scope">
            <el-button type="text" @click="showMaterials(scope.row.usage.material)">{{ scope.row.usage.count }}</el-button>
          </template>
        </el-table-column>
        <el-table-column
            label="运用材料"
            :key="9">
          <template slot-scope="scope">
            <el-button type="text" @click="showMaterials(scope.row.application.material)">{{ scope.row.application.count }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import cornerStudentPoint from "../components/cornerStudentPoint";
import {tableoption, pagination} from "@/utils/util";

export default {
  components: {
    cornerStudentPoint
  },
  name: "MaterialInteraction",
  props: {
    arryList: {
      type: Array,
      default: () => []
    },
    tableoption: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    downs(imgsrc) {
      this.$emit('downs', imgsrc);
    },
    getCornerFn(option) {
      this.$emit('getCornerFn', option);
    },
    showMaterials(materials) {
      this.$emit('showMaterials', materials);
    }
  }
}
</script>

<style scoped>
.list {
  display: flex;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid #f4f4f4;
}

.list:last-child {
  border-bottom: none;
}

.list:hover {
  background: #f4f4f4;
  text-decoration: underline;
}

.list-b {
  flex: 1;
}

.list-c {
  color: #e55f00;
}

.list-c em {
  font-style: normal;
}

.point-list {
  overflow: hidden;
}

.point-list p {
  width: 50%;
  float: left;
  font-size: 13px;
  cursor: pointer;
}

.point-list p:hover {
  text-decoration: underline;
}

.point-list p i {
  font-style: normal;
  font-weight: bold;
  color: #006dcd;
  font-size: 16px;
}
</style>
